<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        *{
            padding: 0;
            margin: 0;
        }

        #cycle{
            height: 50px;
            width: 50px;
            background-color: #e43126;
            border-radius: 50%;
            position: relative;
        }

    </style>
</head>
<body>

<div id="cycle"></div>


<button id="right" type="button">D</button>
<button id="left" type="button">A</button>
<button id="top" type="button">W</button>
<button id="bootom" type="button">S</button>

<script>

var cycle = document.getElementById('cycle');

var r = document.getElementById('right');
var l = document.getElementById('left');

    r.onclick = function () {
        cycle.style.left = cycle.offsetLeft + 1 + 'px';
        console.dir(cycle.style.left)
    };

    l.onclick = function () {
        cycle.style.left = cycle.offsetLeft - 1 + 'px';
        console.dir(cycle)
    };


    document.onkeypress = function (e) {
        if(e.key == 'd'){
            cycle.style.left = cycle.offsetLeft + 1 + 'px';
        }

        if(e.key == 'a'){
            cycle.style.left = cycle.offsetLeft - 1 + 'px';
        }
    }


</script>
</body>
</html>